<template>
  <PageBox :data="dataInfo" @searchBtn="getTbody" :maring="maring" :isRadio="isRadio" :isCheckbox="isCheckbox"
    @tableCheckboxBtn="tableCheckboxBtn" @tableRadioBtn="tableRadioBtn">
    <template #search="{ search }">
      <ElFormItemBox label="对账状态" prop="isReconciled">
        <ElSelectBox :data="search" dataName="isReconciled" :all="{
          label: '全部',
          value: -1,
        }" :options="options.state" />
      </ElFormItemBox>
      <ElFormItemBox label="入库状态" prop="inStockState">
        <ElSelectBox :data="search" dataName="inStockState" :all="{
          label: '全部',
          value: -1,
        }" :options="options.stockState" />
      </ElFormItemBox>
      <ElFormItemBox label="供应商" prop="supplierCode">
        <ElSelectBox :data="search" dataName="supplierCode" :options="options.supplier" />
      </ElFormItemBox>
      <ElFormItemBox label="采购单号" prop="purchaseOrderNo">
        <ElInputBox :data="search" dataName="purchaseOrderNo" />
      </ElFormItemBox>
      <ElFormItemBox label="物料名称" prop="goodsName">
        <ElInputBox :data="search" dataName="goodsName" />
      </ElFormItemBox>
      <ElFormItemBox label="对账日期" prop="">
        <ElDaysBox :data="search" :dataName="['beginTime', 'endTime']" />
      </ElFormItemBox>
    </template>
    <template #headR>
    </template>
    <template #isReconciled="{ row }">
      <ElTagBox :data="row.isReconciled" :options="options.state" />
    </template>
    <template #creditBillNo="{ row }">
      <PopoverTabel :title="row.creditBillNo" :width="1000" :thead="[
        {
          label: '规格编号',
          prop: 'specificationCode',
          align: 'center',
          width: 100,
        },
        {
          label: '物料名称',
          prop: 'goodsName',
          align: 'left',
          width: 220,
        },
        {
          label: '规格型号',
          prop: 'specificationName',
          align: 'left',
          width: 100,
        },
        {
          label: '供应商',
          prop: 'supplierName',
          align: 'left',
          width: 200,
        },
        {
          label: '退货数量',
          prop: 'creditQuantity',
          align: 'center',
          width: 100,
        },
        {
          label: '备注',
          prop: 'creditDetailRemark',
          align: 'center',
          width: null,
        },
      ]" :tbody="row.detailList" />
    </template>
  </PageBox>
  <ElPupFormBox :pup="pup">
    <template #default="{ form }">
      <ElFormItemBox label="采购单号" prop="purchaseOrderNo">
        <ElInputBox :data="form" dataName="purchaseOrderNo" disabled />
      </ElFormItemBox>
      <ElFormItemBox label="物料名称" prop="goodsName">
        <ElInputBox :data="form" dataName="goodsName" disabled />
      </ElFormItemBox>
      <ElFormItemBox label="规格型号" prop="specificationName">
        <ElInputBox :data="form" dataName="specificationName" disabled />
      </ElFormItemBox>
      <ElFormItemBox label="供应商" prop="supplierName">
        <ElInputBox :data="form" dataName="supplierName" disabled />
      </ElFormItemBox>
      <ElFormItemBox label="更正前数量" prop="planPurchaseQuantity">
        <ElNumberBox :data="form" dataName="planPurchaseQuantity" disabled />
      </ElFormItemBox>
      <ElFormItemBox label="更正数量" :prop="`reconciledCorrectionQuantity`" isRules>
        <ElNumberBox :data="form" dataName="reconciledCorrectionQuantity" />
      </ElFormItemBox>
      <ElFormItemBox label="更正后数量" prop="">
        <ElInputBox :data="correctedQuantity(form)" disabled />
      </ElFormItemBox>
      <ElFormItemBox label="更正原因" :prop="`reconciledCorrectionReason`" isRules>
        <ElInputBox :data="form" dataName="reconciledCorrectionReason" type="textarea" />
      </ElFormItemBox>
    </template>
  </ElPupFormBox>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const { proxy } = getCurrentInstance() as any;
import './pageCss.scss'; // 引入样式
import { useListComponent } from './pageTs'; // 引入逻辑
const props = withDefaults(
  defineProps<{
    isRadio?: boolean; //单选
    isCheckbox?: boolean; //多选
    maring?: number; //间距
    query?: any; //
  }>(),
  {
  },
);
const pup = reactive({
  state: false,
  typeName: 0,
  title: `对账管理`,
  width: 600,
  height: 'auto',
  form: {
    purchaseDetailCode: "", // 采购明细唯一code
    reconciledCorrectionQuantity: "", // 对账修正数量
    reconciledCorrectionReason: "", // 对账修正原因
  },
  btns: [
    {
      title: '保存',
      type: 'primary',
      click: (pup: any) => {
        const _form = pup.form
        proxy.$api.GoodsPurchaseOrder.UpdatePurchaseOrderDetailReconciledQuantity({
          purchaseDetailCode: _form.purchaseDetailCode, // 采购明细唯一code
          reconciledCorrectionQuantity: _form.reconciledCorrectionQuantity, // 对账修正数量
          reconciledCorrectionReason: _form.reconciledCorrectionReason, // 对账修正原因
        })
          .then((res: any) => {
            pup.state = false
            proxy.$message('更改成功');
            getTbody()
          }).catch(() => {
            pup.loading = false
          })

      }
    }
  ]
});
const correctedQuantity = (row: any) => {
  return proxy.$count(`${Number(row.planPurchaseQuantity) ? row.planPurchaseQuantity : 0}+${Number(row.reconciledCorrectionQuantity) ? row.reconciledCorrectionQuantity : 0}`)
}
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'tableRadioBtn', row: any): void;
  (event: 'tableCheckboxBtn', arr: any): void;
}>();
//多选数据
const tableCheckboxBtn = (arr: any) => {
  emit('tableCheckboxBtn', arr);
};
//单选数据
const tableRadioBtn = (row: any) => {
  emit('tableRadioBtn', row);
};
// 组件挂载后执行
onMounted(() => {
  getTbody();
});
const { dataInfo, getTbody, options } = useListComponent({
  ...props,
  pup: pup,
});
const 采购数量 = ref()
</script>
